<template>
  <a-modal v-model="visibleMsg" title="经纪人详情" :width="800" :footer="null" @cancel="$emit('update:visibleMsg', false)">
    <div class="m-row">
      <div class="name mr24">
        <div>
          <span>{{ brokerName }}</span> {{ brokerAddress }}
        </div>
        <div><a-icon type="phone" /> {{ brokerPhone }}</div>
        <div><a-icon type="idcard" /> {{ brokerCarCode }}</div>
      </div>
      <div class="r-msg-status">
        <div class="s-item" v-for="(item, index) in numArr" :key="item.type">
          <div class="s-item-t">{{ item.name }}</div>
          <div class="s-item-b">{{ item.num }}</div>
          <div class="s-item-line" v-if="index != numArr.length - 1"></div>
        </div>
      </div>
    </div>
    <div class="tjxq mt32 pl8">
      推荐详情
    </div>
    <div class="xq-form-wrapper">
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          class="xq-form-content-table"
        >
          <!-- 主要内容，表格，自定义 header -->
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- 主要内容，表格，自定义 td -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <span v-if="col.dataIndex === 'status'" :key="index">
              <span v-if="text === 1">已投递</span>
              <span v-if="text === 2">已约面</span>
              <span v-if="text === 3">待入职</span>
              <span v-if="text === 4">已招聘</span>
              <span v-if="text >= 5">未通过</span>
            </span>
            <span v-else-if="col.dataIndex === 'gmtCreate'" :key="index">
              {{ text ? moment(text).format("YYYY-MM-DD") : "" }}
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import moment from "moment";

import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getFindBrokerJobSeekerById } from "../../api";
const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  props: {
    visibleMsg: {
      type: Boolean,
      default: false
    },
    brokerId: {
      type: String,
      default: ""
    }
  },
  watch: {
    visibleMsg(v) {
      if (v) this.onGetFindBrokerJobSeekerById();
    }
  },
  mixins: [curdMixin],
  data() {
    return {
      numArr: [
        { type: "1", name: "推荐人总数", num: 0 },
        { type: "2", name: "已入职", num: 0 }
      ],
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      brokerName: "",
      brokerAddress: "",
      brokerPhone: "",
      brokerCarCode: ""
    };
  },
  methods: {
    moment,
    async onGetFindBrokerJobSeekerById(v) {
      try {
        this.spinning = true;
        const { data } = await getFindBrokerJobSeekerById({
          brokerId: this.brokerId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.numArr[0].num = data.totalCount;
        this.numArr[1].num = data.entryCount;
        this.brokerName = data.brokerName;
        this.brokerAddress = data.brokerAddress;
        this.brokerPhone = data.brokerPhone;
        this.brokerCarCode = data.brokerCarCode;
        this.tableData = data.deliverRecordVOPage.entities;
        this.total = data.deliverRecordVOPage.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetFindBrokerJobSeekerById();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetFindBrokerJobSeekerById();
    }
  }
};
</script>
<style lang="scss" scoped>
.m-row {
  display: flex;
  .name {
    width: 248px;
    height: 100px;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 12px 0 0 24px;
    span {
      font-size: 16px;
      font-weight: 500;
    }
    div {
      margin-bottom: 4px;
    }
  }

  .r-msg-status {
    width: 480px;
    height: 100px;
    box-shadow: 0px 6px 16px 8px rgba(0, 0, 0, 0.03), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    margin-left: 10px;
    .s-item {
      width: 50%;
      box-sizing: border-box;
      padding-top: 24px;
      padding-left: 24px;
      position: relative;
      // &:hover {
      //   background: #f4f6fa;
      // }
      .s-item-t {
        color: #a6a8b4;
      }
      .s-item-b {
        font-size: 18px;
        font-weight: bold;
        color: #55565d;
      }
      .s-item-line {
        position: absolute;
        top: 32px;
        right: 0;
        width: 1px;
        height: 36px;
        background: #e8e8e8;
      }
    }
    .s-item:nth-child(1) {
      .s-item-t {
        color: var(--primary);
      }
      .s-item-b {
        color: var(--primary);
      }
    }
    .s-item:nth-child(2) {
      background: #f4f6fa;
    }
  }
}
.tjxq {
  height: 16px;
  line-height: 16px;
  border-left: 4px solid var(--primary);
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  vertical-align: middle;
}
</style>
